

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<script src="../../js/vue.js"></script>
	<script type="text/javascript" src="../../js/jquery-2.1.4.js"></script>
	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css"  media="all">
 <style>
 	*{
 		padding: 0;
 		margin: 0;
 	}
 	#content{
 		width: 100%;
 		height: 270px;
 		
 	}
	#bottom{
		width: 100%;
		height: 400px;
		background-color: white;
	}
 	.box{
 		margin-left: 70px;
 		margin-top: 70px;
 		width:260px;
 		height: 110px;
 		float: left;
 		background-color: white;
 		position: relative;
 	}
 	#userBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 		
 	}
 	#userBox:hover{
 		background-color: rgb(64,201,198);
 	}
 	#user{
 		font-size: 35px;
 		color: rgb(64,201,198);
 	}
 	#proBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#proBox:hover{
 		background-color: rgb(54,163,247);
 	}
 	#pro{
 		font-size: 40px;
 		color: rgb(54,163,247);
 	}
 	#storeBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#storeBox:hover{
 		background-color: rgb(244,81,108 );
 	}
 	#store{
 		font-size: 40px;
 		color: rgb(244,81,108 );
 	}
 	#orderBox{
 		width: 80px;
 		height: 80px;
 		border-radius: 5px;
 		margin-top: 15px;
 		margin-left: 15px;
 		text-align: center;
 		line-height: 80px;
 	}
 	#orderBox:hover{
 		background-color: rgb(52,191,163 );
 	}
 	#order{
 		font-size: 40px;
 		color: rgb(52,191,163 );
 	}
 	.box .rightBox{
 		width: 80px;
 		height: 80px;
 		top: 22px;
 		right: 15px;

 		position: absolute;
 		font-size: 16px;
 	}
 	
 </style>
</head>
<body>
	<div id="content">
		<div class="box">
			<div id="userBox">
			 	<i class="layui-icon" id="user">&#xe770;</i>  
			</div>
			<div class="rightBox">
				<span>用户数量</span><br /><br />
				<span id="userCount"></span>
			</div>
		</div>
		<div class="box">
			<div id="proBox">
			 	<i class="layui-icon" id="pro">&#xe657;</i>  
			</div>
			<div class="rightBox">
				<span>商品数量</span><br /><br />
				<span id="proCount"></span>
			</div>
		</div>
		<div class="box">
			<div id="storeBox">
			 	<i class="layui-icon" id="store">&#xe715;</i> 
			</div>
			<div class="rightBox">
				<span>门店数量</span><br /><br />
				<span id="busiCount"></span>
			</div>
		</div>
		<div class="box">
			<div id="orderBox">
			 	<i class="layui-icon" id="order">&#xe65e;</i>  
			</div>
			<div class="rightBox">
				<span>订单数量</span><br /><br />
				<span id="orderCount"></span>
			</div>
		</div>
		
	</div>
	<div id="bottom"></div>

  

  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>


  $(function(){
	  var userBox = $("#userBox");
	  var proBox = $("#proBox");
	  var storeBox = $("#storeBox");
	  var orderBox = $("#orderBox");
	  userBox.mouseover(function(){
		  $("#user").css("color","white");
	  });
	  userBox.mouseleave(function(){
		  $("#user").css("color","rgb(64,201,198)");
	  });
	  proBox.mouseover(function(){
		  $("#pro").css("color","white");
	  });
	  proBox.mouseleave(function(){
		  $("#pro").css("color","rgb(54,163,247)");
	  });
	  storeBox.mouseover(function(){
		  $("#store").css("color","white");
	  });
	  storeBox.mouseleave(function(){
		  $("#store").css("color","rgb(244,81,108 )");
	  });
	  orderBox.mouseover(function(){
		  $("#order").css("color","white");
	  });
	  orderBox.mouseleave(function(){
		  $("#order").css("color","rgb(52,191,163 )");
	  });
	  		$.ajax({
                 url:"/houtai/page/selectUserCount",
                 dataType:"json",
                 type:"get",
                 success:function (data) {
                     $("#userCount").text(data.obj);
                 }
             })
		  $.ajax({
			  url:"/houtai/page/selectProCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#proCount").text(data.obj);
			  }
		  })
		  $.ajax({
			  url:"/houtai/page/selectBusiCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#busiCount").text(data.obj);
			  }
		  })
		  $.ajax({
			  url:"/houtai/page/selectOrderCount",
			  dataType:"json",
			  type:"get",
			  success:function (data) {
				  $("#orderCount").text(data.obj);
			  }
		  })
  });

  </script>
</body>
</html>


